<template>
  <div class="full-width bg-gray-light3">
    <div class="bg_img full-width min-width-130 full-height" style="padding-top: 1px">
      <div class="d-flex">
        <div class="w-18 height-36 px-7 flex_between_center rounded-15 bg-black-light2">
          <span class="text-orange text-30">科技创新.</span>
          <img class="width-1 height-2 cursor-pointer" :src="aboutArrow" alt="right">
        </div>
        <el-row class="flex-fill">
          <el-col v-for="item in list" :key="item.id" :span="8">
            <div
              @click="handleClick(item.url, item.id)"
              class="w-100 height-36 text-24 text-white flex_center rounded-5 cursor-pointer"
              :style="{'background-image': 'url(' + item.img + ')','background-repeat':'no-repeat','background-size':'cover'}"
            >{{item.title}}</div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { list } from '@/static/technology'
import aboutArrow from '@/assets/images/aboutArrow.png'
import { useRouter } from 'vue-router'

const router = useRouter()
const handleClick = (path, id) => {
  router.push({
    path,
    query: {
      id
    }
  })
}
</script>

<style lang="scss" scoped>
.bg_img{
  background: url('@/assets/images/HomeBack.jpg') no-repeat;
  background-size: cover;
}
</style>
